<template>
  <table class="simple-table">
    <thead>
    <tr>
      <th v-for="column in columns" :key="column.key">
        {{ column.title }}
      </th>
    </tr>
    </thead>
    <tbody>
    <tr v-if="!data || data.length === 0">
      <td :colspan="columns.length" class="empty-cell">
        No Data Available
      </td>
    </tr>
    <tr v-else v-for="row in data" :key="row.id">
      <td v-for="column in columns" :key="column.key">
        <span v-if="column.render" v-html="column.render(row)"></span>
        <span v-else>{{ row[column.key] }}</span>
      </td>
    </tr>
    </tbody>
  </table>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';

export default defineComponent({
  name: 'SimpleTable',
  props: {
    columns: {
      type: Array as PropType<Array<{ title: string; key: string; render?: (row: any) => string }>>,
      required: true,
    },
    data: {
      type: Array as PropType<Array<any>>,
      required: true,
    },
  },
});
</script>

<style scoped>
.simple-table {
  width: 100%;
  border-collapse: collapse;
}

.simple-table th,
.simple-table td {
  padding: 8px;
  border: 1px solid #ddd;
  text-align: left;
}

.simple-table th {
  background-color: #f5f5f5;
}

.empty-cell {
  text-align: center;
  color: #888;
  font-style: italic;
}
</style>
